<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id="app">
    <div id="box" style="margin-top: 10px;margin-bottom: 10px">
        <el-row>
            <el-input v-model="input" placeholder="商品名" style="margin-left:20px;width: 200px;"></el-input>
            <el-select v-model="cateValue" placeholder="商品类" style="width: 150px;">
                <el-option
                        v-for="item in cate"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-select v-model="statusValue" placeholder="状态" style="width: 100px;">
                <el-option
                        v-for="item in status"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle @click="addProduct"></el-button>
        </el-row>
    </div>
    <div id="table">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    stripe
                    max-height="588px">
                <el-table-column
                        align="center"
                        prop="proId"
                        label="商品编号"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="proType"
                        label="商品分类"
                        align="center"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="proName"
                        label="商品名称"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="商品价格"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="stock"
                        label="商品库存"
                        align="center"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="proStatus"
                        label="商品状态"
                        align="center"
                        width="50">

                </el-table-column>
                <el-table-column
                        prop="proMainPicture"
                        label="商品图片"
                        align="center"
                        width="125">
                    &lt;!&ndash;插入图片链接的代码&ndash;&gt;
                    <!--成功显示图片-->
                    <template slot-scope="scope">
                        <img :src="scope.row.proMainPicture" alt="" style="width: 100px;height: 100px">
                    </template>
                </el-table-column>

                <el-table-column
                        prop="business.businessName"
                        align="center"
                        label="店家"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="proCreatetime"
                        label="发布时间"
                        align="center"
                        width="180">
                </el-table-column>

                <el-table-column
                        prop="introduce"
                        label="商品介绍"
                        align="center"
                        width="350">
                </el-table-column>


                <el-table-column
                        fixed="right"
                        label="操作"
                        align="center"
                        width="200">
                    <template slot-scope="scope">

                        <el-button type="primary" @click="updateBrand1(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteBrand(scope.row.id)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>

    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑商品"
            :visible.sync="dialogVisible"
            width="50%"
    >

        <el-form :model="addProduct" label-width="100px" class="demo-ruleForm">

            <el-form-item label="商品分类" prop="proType">
                <el-select v-model="addProduct.proType" placeholder="请选商品分类">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="商品名称" prop="proName">
                <el-input v-model="addProduct.proName"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="price">
                <el-input v-model="addProduct.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存" prop="stock">
                <el-input v-model="addProduct.stock"></el-input>
            </el-form-item>
            <el-form-item label="商品图片" prop="proMainPicture">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="photoDialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>


            <el-form-item label="商品描述" prop="introduce">
                <el-input type="textarea" v-model="addProduct.introduce"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="">立即创建</el-button>
                <el-button @click="">重置</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>

</div>
</body>
<script src="../js/vue.js"></script>
<script src="../plugins/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<SCRIPT>

    var vue = new Vue({
        el: '#app',
        mounted() {
            //当页面加载完成后，发送异步请求，获取数据
            this.getAllProduct();
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },

            addProduct(){
                this.dialogVisible = true;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },

            deleteRow(index, rows) {
                rows.splice(index, 1);
            },

            getAllProduct(){
                axios.get("http://localhost:8080/products").then((res) => {
                    this.tableData = res.data.body;
                });
            }
        },

        data() {
            return {
                dialogImageUrl: '',
                photoDialogVisible: false,
                dialogVisible:false,
                activeIndex: '1',
                activeIndex2: '1',
                addProduct: {
                    proId: 111111,
                    proType: '数码产品',
                    proName: '小米12S Ultra',
                    price: 3299.66,
                    stock: 13014,
                    proMainPicture: "http://huangrui.vaiwan.com/images/2022.07.05/show0.jpg",
                    introduce: '那么便宜都不买你是不是脑子有问题？'
                },
                status: [{
                    value: '选项1',
                    label: '已出售'
                }, {
                    value: '选项2',
                    label: '未出售'
                },
                ],

                cate: [{
                    value: '选项1',
                    label: '运动类'
                }, {
                    value: '选项2',
                    label: '生活类'
                },
                ],
                tableData: [
                    {
                        proId: 111111,
                        proType: '数码产品',
                        proName: '小米12S Ultra',
                        price: 3299.66,
                        stock: 13014,
                        proMainPicture: "",
                        business: {
                            businessId: 123,
                            businessName: "鱼龙混杂",
                            businessAccount: 112335,
                            businessPassword: "hhh",
                        },
                        proCreatetime: '2022-5-19 10:10:10',
                        proStatus: "在售",
                        introduce: '那么便宜都不买你是不是脑子有问题？'
                    }
                ],
            };
        }
    })
</SCRIPT>
</html>